<template>
	<view class="ap_ct">
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<view class="box-top">
			<text>状态: </text>
			<u-radio-group
			    v-model="selectVal"
				@change="radioChange"
			    placement="row">
				<u-radio
					:customStyle="{marginTop: '6rpx',marginLeft: '8rpx'}"
					v-for="(item, index) in radiolist"
					:key="index"
					:label="item.label"
					:name="item.status"
					activeColor="#2979ff"
				/>
			</u-radio-group>
		</view>
	
		<u-list @scrolltolower="scrolltolower" v-if="maintainList.length!=0">
			<u-list-item
					v-for="(item, index) in maintainList"
					:key="item.id"
				>
				<u-swipe-action>
					 <u-swipe-action-item
						:options="options1"
						:name="item.id"
						:disabled="!(item.status==0)"
						@click="del"
					 >
					   <u-row
						justify="space-between"
						gutter="6"
						customStyle="margin: 20rpx 20rpx 0 20rpx;padding: 20rpx 20rpx 20rpx 20rpx;border-radius: 20rpx;background-color: #fff;"
						@click="toRepairs(item.id)"
						   >
						<u-col span="8" >
							<u--text size="14" :lines="1" :text="item.questionDetailed">
							</u--text>
						</u-col>
						<u-col span="4" style="padding-left: 20rpx;">
							<u--text size="12" :lines="1" :text="item.createTime"></u--text>
						</u-col>
					   </u-row>
					 </u-swipe-action-item>
				</u-swipe-action>
			</u-list-item>
			<view v-if="flag" style="margin-bottom: 65px;">
				<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
			</view>
		</u-list>
		
		<u-empty
				v-else
				:text="listTip"
				textSize="20"
				textColor="#8f99a3"
				iconColor="blue"
				iconSize="160"
				marginTop="0"
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		
		<!-- 返回顶部组件 -->
		<u-back-top
			:scroll-top="scrollTop" 
			icon="http://106.13.239.254/icon/go_back.png"
			:iconStyle="iconStyle"
			top="400"
			customStyle="opacity: 0.9;">
		</u-back-top>
		<u-toast ref="uToast"></u-toast>

		<u-tabbar
			:value="value1"
			@change="change1"
			:border="true"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<view class="ap_bt" @click="toRepairs()">
				<u-icon name="plus-circle-fill" color="#2979ff" size="44"></u-icon>
			</view>
		</u-tabbar>
	</view>
</template>

<script>
	import {getMaintainList, modifyMaintain} from '@/utils/api.js'
	export default {
		data() {
			return {
				selectVal: -1,
				listTip: '您还没有发起过申请,去添加一个吧!',
				textArry: [
					'您还没有发起过申请,去添加一个吧!',
					 '暂时还没有待处理的上报信息哦!',
					 '暂时还没有处理中的上报信息哦!',
					 "暂时还没有已完成的上报信息哦!",
					 "未找到已撤销的列表数据哦!",
				],
				options1: [{
                    text: '撤销',
                    style: {
                        backgroundColor: 'rgb(60, 156, 255)'
                    }
                },{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				radiolist: [{
					status: -1,
					label: '全部',
					disabled: false
				},
				{
					status: 0,
					label: '待处理',
					disabled: false
				},
				{
					status: 1,
					label: '处理中',
					disabled: false
				}, 
				{
					status: 2,
					label: '已完成',
					disabled: false
				},
				{
					status: 3,
					label: '已撤销',
					disabled: false
				}],
				value1: 0,
				maintainList: [],
				queryParams:{pageNo: 1, pageSize: 10, status: -1},
				flag: false,
				
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: { 
			del(obj){
				let id = obj.name
				const _that = this
				let params;
				let tip;
				if(obj.index == 0){
					params = {id:id, status:3}
					tip = '撤销'
				}else {
					params = {id:id, status:4}
					tip = '删除'
				}
				modifyMaintain(params).then(res => {
					getApp().globalData.toast[0].message = `上报信息${tip}成功!`
					_that.$refs.uToast.show({
						...getApp().globalData.toast[0],
						complete() {
							_that.radioChange(this.queryParams.status)
						}
					})
				})
			},
			radioChange(status) {
				this.listTip = this.textArry[status+1]
				this.queryParams.pageNo = 1
				this.queryParams.status = status
				this.maintainList = []
				this.flag = false
				this.loadmore()
			},
			toRepairs(id){
				//跳转报修详细页面
				let str = ''
				if(id != null){
					str = `?id=${id}`
				}
				uni.$u.route(`/pages/repairs/repairs${str}`);
			},
			scrolltolower() {
				//下拉加载
				if(!this.flag){
					this.query.pageNo++
					this.loadmore()
				}else {
					this.flag = true
				}
			},
			loadmore() {
				const _that = this
				getMaintainList({params: _that.queryParams}).then(res => {
					_that.maintainList = _that.maintainList.concat(res.list)
					if(res.list.length == 0 && _that.maintainList.length>9) _that.flag = true
				}).catch(err => {
					getApp().globalData.toast[1].message = '加载数据失败'
					_that.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.ap_ct{
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		
		.box-top {
			position: relative;
			padding: 10rpx 10rpx;
			height: 100rpx;
			background-color: #fff;
			border-bottom: rgb(242, 242, 242) solid 2rpx;
			
		}
		
		.ap_bt{
			position: relative;
			top: -30rpx;
			margin: 0 auto;
		}
		
	}
	

</style>
